<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body" style="height: 100%">
        <!--首行，标题-->

        <div class="d-flex jc-center row title_wrap" style="height: 50px">
          <dv-decoration-10 class="dv-dec-10" />
          <div class="d-flex jc-center">
            <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
            <div class="title">
              <dv-decoration-1 class="dv-dec-1" />
              <span class="title-text colorFont" style="width: 100% ; font-size: 30px;">数字工厂可视化平台</span>
              <dv-decoration-6
                class="dv-dec-6"
                :reverse="true"
                :color="['#50e3c2', '#67a1e5']"
              />
            </div>
            <dv-decoration-8
              class="dv-dec-8"
              :reverse="true"
              :color="decorationColor"
            />
          </div>
          <dv-decoration-10 class="dv-dec-10-s" />
        </div>

        <!-- 第二行
        d-flex= display:flex, 设置该div为flex流式容器
        jc-between = justify-content: space-between;  /* 均匀排列每个元素首个元素放置于起点，末尾元素放置于终点 */
        aside-width=width: 40%;
        -->
        <div class="d-flex jc-between px-2 row" style="height: 50px">
          <div class="d-flex aside-width">
            <div class="react-left ml-4 react-l-s" style="width: 80%">
              <span class="react-left"></span>
              <span class="text purPleTitle" style="font-size: large;font-weight: bold;cursor: pointer" @click="fetchData()">机台状态</span>
              <div class="text statusGreen statusBall1" style="margin-left: 20px">生产</div>
              <div class="text statusYellow statusBall1" style="margin-left: 20px">待机</div>
              <div class="text statusRed statusBall1" style="margin-left: 20px">停用</div>
              <div class="text statusGray statusBall1" style="margin-left: 20px">离线</div>
            </div>
            <!--
            <div class="react-left ml-3">
              <span class="text">数据分析2</span>
            </div>-->
          </div>
          <div class="d-flex aside-width" style="justify-content: flex-end">
            <div class="react-right bg-color-blue mr-3">
              <span class="text fw-b colorFont">东颂智慧屏</span>
            </div>
            <div class="react-right mr-4 react-l-s">
              <span class="react-after"></span>
              <span class="text" style="color: #ffc107"
                >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
              >
            </div>
          </div>
        </div>
        <!-- 第三行数据 -->
        <div class="body-box" style="height: 964px;">
          <div class="d-flex jc-between px-2" style="height:62%">
            <dv-border-box-10 style="width: 250px;margin-right: 15px"  >
              <cctv lineName="现场" />
            </dv-border-box-10>
            <div style="width: calc(100% - 250px);height: 100%">
                <!--生产线区域--->
              <div style="display: flex;flex-direction: row;height: 100%">
                <device-summary style="width: 500px" v-if="false"/>
                <dv-border-box-13 style="width: calc(100% - 0px);height: 100%">
                  <div class="d-flex" style="flex-direction: column;height: 100%;padding: 10px">
                      <dv-decoration-3 class="dv-dec-3" />
                    <!--
                      <prodLine lineName="产线1" />
                      <prodLine lineName="产线2" />
                      <prodLine lineName="产线3" />
                      <prodLine lineName="产线4" />
                      <prodLine lineName="产线5" />
                      -->
                    <prod-line-whole @click="handleDeviceClick"/>
                  </div>
                </dv-border-box-13>
              </div>
            </div>
          </div>
          <div class="d-flex jc-between px-2 " style="height: calc(38% - 38px);margin-top: 20px">
            <div style="width: 270px;margin-right: 15px"  >
              <ItemWrap
                      title="MO列表"
                      style="padding: 0 10px 16px 10px">
                <molist :data="store.data.mosList" />
              </ItemWrap>
            </div>
            <div style="width: calc(100% - 285px)"  >
              <ItemWrap
                      title=""
                      style="padding: 0 10px 16px 10px">
                <div style="display: flex;flex-direction: row;">

                  <plinelist v-if="false" :data="store.data.lineList" style="margin-left: 10px"/>
                  <!--
                  <qcdata :cdata="store.qcList" :show-value="false" style="width: calc(100% - 430px);margin-left: 50px"/>
                  -->
                  <!--
                  <qcdata :cdata="store.qcList" :show-value="true" style="width: 50%;"
                     @titleClick="store.nextLine()"/>
                     -->
                  <qcdata :cdata="store.qcList" :show-value="true" style="width: calc(100% - 100px);margin-left: 50px"
                          @titleClick="store.nextLine()"/>

                  <qcdata-pie :cdata="store.qcList" :show-value="true" style="width: 25%;"
                    v-if="false"      />

                  <mi-qcdata-pie :cdata="store.miList"
                                 :title="'MI异插抛料'"
                                 :show-value="true" style="width: 25%;"
                       v-if="false &&store.miCount>0&& store.miList"     @click="store.nextMI()" />

                  <defect-analysis v-if="false"
                      :data="store.qcList.qcDefectTrans" style="margin-top: 15px;width: calc(100% - 910px);height: 280px"/>
                </div>
              </ItemWrap>
            </div>
            <!--
            <div style="width: 500px;margin-right: 15px"  >
              <plinelist :data="store.data.lineList"/>
            </div>
            <div style="width: calc(100% - 810px);"  >
              <qcdata :data="store.data.qcList"/>
            </div>
            -->

            <!--
            <span style="font-size: 1px">1px字体</span> <br/>
            <span style="font-size: 2px">2px字体</span> <br/>
            <span style="font-size: 3px">3px字体</span> <br/>
            <span style="font-size: 4px">4px字体</span> <br/>
            <span style="font-size: 5px">5px字体</span> <br/>
            <span style="font-size: 6px">6px字体</span> <br/>
            <span style="font-size: 8px">8px字体</span> <br/>
            <span style="font-size: 9px">9px字体</span> <br/>
            <span style="font-size: 10px">10px字体</span> <br/>
            <span style="font-size: 12px">12px字体</span><br/>
            <span style="font-size: 15px">15px字体</span><br/>
            <span style="font-size: 18px">18px字体</span><br/>-->
          </div>
        </div>
      </div>
    </div>
    <device-info ref="deviceInfo" />
  </div>
</template>

<script>
import drawMixin from "../../utils/drawMixin";
import { formatTime } from '../../utils/index.js'
import deviceSummary from "./deviceSummary";

//import centerLeft1 from './centerLeft1'
//import centerLeft2 from './centerLeft2'

//import prodLine from './prodLine'
import prodLineWhole from "@/views/m3/prodLine-whole";
import cctv from './cctv'
import molist from './molist'
import defectAnalysis from './defect-analysis'
import plinelist from './plinelist'
import qcdata from './qcdata'
import qcdataPie from './qcdata-pie'
import miQcdataPie from './mi-qcdata-pie'
import {getAction} from "../../api/manage"
import store from "./store"
import DeviceInfo from './DeviceInfo'
//const service_addr='192.168.205.1:8080'
const service_addr='192.168.30.247:58080'
export default {
  mixins: [ drawMixin ],
  data() {
    return {
      orgid:102,
      deviceInfoVisible:false,
      store,
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      decorationColor: ['#568aea', '#568aea']
    }
  },
  components: {
   // prodLine,
    prodLineWhole,
    deviceSummary,
    cctv,molist,plinelist,qcdata,qcdataPie,miQcdataPie,DeviceInfo
    ,defectAnalysis
  },
  created() {
      this.fetchData()
      /*let p=()=> {
        setTimeout(() => {
          this.fetchData()
          p()
        }, 60000)
      }
      p()*/
      window.m3Vue=this
  },
  mounted() {
    this.timeFn()
    this.cancelLoading()
    setTimeout(()=>{
      let rows=document.getElementsByClassName("row")
      let rowsHeight=0
      for (let i=0 ;i< rows.length;i++) {
        rowsHeight+=rows[i].clientHeight
      }
      let lastRowHeight=document.getElementsByClassName("host-body")[0].clientHeight-rowsHeight;
      //alert(lastRowHeight)
      document.getElementsByClassName("body-box")[0].style.height=lastRowHeight+'px'
      this.$nextTick(()=>{
      })
    },1000)

  },
  beforeDestroy () {
    clearInterval(this.timing)
  },
  methods: {
    handleDeviceClick(eq){
      console.log(eq)
      getAction("http://"+service_addr+"/api/mes.bigscreen/digital-factory/getDeviceInfo?orgid="+this.orgid+"&equipment="+eq.equipmentNos).then(res=>{
        res=res.data
        if (!res.success) return
        this.$refs.deviceInfo.mVisible=true
        this.$refs.deviceInfo.model={...eq,ext:res.result}
      })
    },
    fetchData(){
      //if (this!=null)return
      /*let pmi=()=>setTimeout(()=>{ //7秒换产线
        this.store.nextMI();
        if (this.store.curMI<this.store.miCount-1){
          pmi()
        }
      },4000)*/
      let p=()=>setTimeout(()=>{ //20秒换产线
        this.store.nextLine();
        //pmi()
        if (this.store.curLine<this.store.lineCount-1){
          p()
        }
        else{
          this.fetchData()
        }
      },30000)
      console.log('fetch Data...')
      //getAction("http://192.168.30.247:58080/api/mes.bigscreen/digital-factory/get2?orgid="+this.orgid)
      getAction("http://"+service_addr+"/api/mes.bigscreen/digital-factory/get2?orgid="+this.orgid)
      .then(res=>{
         if (res.status!=200) {
           alert("访问服务端出错")
           return
         }
         console.log("结果",res)
         this.store.setData(res.data.result)
         p()
      })
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    cancelLoading() {
      let that=this
      setTimeout(() => {
        that.loading = false
      }, 500)
    }
  }
}
console.log(window.opener)
/*if (window.opener==undefined){
  window.open(window.location.href,'newwindow',
          'width='+(window.screen.availWidth-10)+',height='+(window.screen.availHeight-30)+
          ',top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')

}*/
</script>

<style lang="scss" scoped>

@import '../../assets/m3/index.scss';
  .leftChart1{
    width: 22%;
    padding: 10px;
    box-sizing: border-box;

    .border-box-content {
      flex-direction: column;
    }
  }
.title {
  position: relative;
  // width: 500px;
  text-align: center;
  background-size: cover;
  color: transparent;
  height: 60px;
  line-height: 46px;

  .title-text {
    font-size: 38px;
    font-weight: 900;
    letter-spacing: 6px;
    width: 100%;
    background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.dv-dec-3 {
  position: absolute;
  width: 55px;
  height: 20px;
  top: 1px;
  left: 10px;
}
  .purPleTitle{
    font-size: large;
    font-weight: bold;
    background-color: #562fde;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 0px 10px
  }
.statusBall1{
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: left;
  padding-left: 30px;
}
  .statusYellow{
    background-image: url("../../assets/img/state.png");
  }
.statusGreen{
  background-image: url("../../assets/img/state1.png");
}
.statusRed{
  background-image: url("../../assets/img/state2.png");
}
.statusGray{
  background-image: url("../../assets/img/state3.png");
}
</style>
